<style>
    .login_class{
        display: flex;
        margin: 0px 20% 0px 35%

    }
    form {
      border: 3px solid #f1f1f1;
      align-content: center;
      align-items: center;
    }

    /* Full-width inputs */
    input[type=text], input[type=password] , select{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    /* Set a style for all buttons */
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
    }

    /* Add a hover effect for buttons */
    button:hover {
      opacity: 0.8;
    }


    /* Center the avatar image inside this container */
    .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
    }

    /* Avatar image */
    img.avatar {
      width: 40%;
      border-radius: 50%;
    }

    /* Add padding to containers */
    .container {
      padding: 16px;
    }

    /* The "Forgot password" text */
    span.psw {
      float: right;
      padding-top: 16px;
    }

    /* Change styles for span and cancel button on extra small screens */
    @media screen and (max-width: 300px) {
      span.psw {
        display: block;
        float: none;
      }
      .cancelbtn {
        width: 100%;
      }
    }
    </style>
    <div class ="login_class">
      <form action = "" #formobj ="ngForm">
          <div class="imgcontainer">
            <img src="../../assets/img/img_avatar2.png" alt="Avatar" class="avatar">
          </div>

          <div class="container">
            <label for="category"><b>类型</b></label>
            <select name ="role" ngModel>
                  <option value ="teacher" >教师</option>
                  <option value ="student">学生</option>
            </select>

            <label for="uname"><b>用户名</b></label>
            <input type="text" placeholder="Enter Username" name="username" required ngModel>

            <label for="psw"><b>密码</b></label>
            <input type="password" placeholder="Enter Password" name="password" required ngModel>

            <button type="submit"  (click) = 'login(formobj)'>登录</button>
            <div>没有账号请先 <span style="color:blue;" (click) = 'reg(formobj)'>注册</span></div>
          </div>

        </form>
    </div>
